import React, { useState } from "react";
import { UserOutlined } from '@ant-design/icons';
import { Content,Header} from 'antd/es/layout/layout';
import { Avatar,Drawer,Menu,ConfigProvider,Layout,Button} from "antd";
import WorksList from "../components/WorksList";
import FavoritesList from "../components/FavoritesList";
import { useHistory } from "react-router-dom/cjs/react-router-dom";

const Other = () => {
    const [avatarUrl, setAvatarUrl] = useState(""); // 头像URL
    const [username, setUsername] = useState("..."); // 用户名
    const [verification, setVerification] = useState("..."); // 学校认证
    const [followers, setFollowers] = useState(10); // 粉丝数
    const [following, setFollowing] = useState(10); // 关注数量
    const [bio, setBio] = useState("..."); // 个人简介
    const [open, setOpen] = useState(false); // 控制粉丝列表弹窗的显示和隐藏
    const [opens, setOpens] = useState(false); // 控制关注列表弹窗的显示和隐藏
    const [isWorksVisible, setIsWorksVisible] = useState(false); // 是否显示作品列表
    const [isFavoritesVisible, setIsFavoritesVisible] = useState(false); // 是否显示收藏列表
    const [current, setCurrent] = useState("Works"); // 当前选中的菜单项，默认为"作品"
    const [isFollowing, setIsFollowing] = useState(false);//关注用户按钮
  
    // 关注用户按钮
    const handleFollow = () => {
        setIsFollowing(!isFollowing);
    }
    // 点击粉丝列表按钮
    const Fan = () => {
        setOpen(true);
    };
    // 关闭粉丝列表弹窗
    const FanClose = () => {
        setOpen(false);
    };
    // 点击关注列表按钮
    const Concern = () => {
        setOpens(true);
    };
    // 关闭关注列表弹窗
    const ConcernClose = () => {
        setOpens(false);
    }
    // 点击作品按钮
    const Works = () => {
        setCurrent("Works");
        setIsWorksVisible(true);
        setIsFavoritesVisible(false);
    }
    // 点击收藏按钮
    const Favorites = () => {
        setCurrent("Favorites");
        setIsFavoritesVisible(true);
        setIsWorksVisible(false);
    }
    // 私信按钮
    const history = useHistory();
    const Message = () =>{
        history.push('/message/usermsg');
    }
    return (
    <ConfigProvider
    theme={{
        token: {
            // Seed Token，影响范围大
            colorPrimary: '#73d13d',
            borderRadius: 20,
            // 派生变量，影响范围小
            colorBgContainer: '#FFFAFA',
        }
        }}
    >
        <Layout>
            <Header 
            style={{
            padding: 0, 
            background: '#ffffff',
            margin:10,
            height:150,
            borderRadius:30,
            display:'flex' ,
            }}
            >
                {/* 头像、昵称、学校、个人简介 */}
                <div style={{marginLeft:10}}>
                    <Avatar size={70} src={avatarUrl} icon={<UserOutlined />} />
                </div>
                <div style={{marginLeft:15,marginTop:-20}}>
                    <span style={{margin:'auto'}}>昵称:{username}</span>
                    <p style={{marginTop:-30}}>学校:{verification}</p>
                    <p style={{marginTop:-40}}>个人简介: {bio}</p>
                </div>
                {/* 粉丝、关注 */}
                <div className="follow-info" style={{ marginTop:90}}>
                    <>
                    <span type="text" onClick={Fan}>粉丝: {followers}</span>
                    <Drawer 
                    title="粉丝列表" 
                    placement="right" 
                    onClose={FanClose} 
                    open={open}>
                    </Drawer>
                    </>
                    <>
                    <span type="text" onClick={Concern} style={{marginLeft:140}}>关注: {following}</span>
                    <Drawer 
                    title="关注列表" 
                    placement="right" 
                    onClose={ConcernClose} 
                    open={opens}>
                    </Drawer>
                    </>
                    {/* 关注按钮 */}
                    <Button 
                    onClick={handleFollow} 
                    style={{
                        marginLeft:140,
                        borderRadius:10,
                        background:'#73d13d',
                        color:'white'
                    }}
                    >
                        {isFollowing ? '取消关注' : '关注'}
                    </Button>
                    {/* 私信按钮 */}
                    <Button 
                    onClick={Message} 
                    style={{
                        borderRadius:10,
                        marginLeft:170,
                        background:'#73d13d',
                        color:'white'
                    }}
                    >
                        私信
                    </Button>
                </div>          
            </Header>
            <Content
            style={{
                margin: '20px 16px',
                padding: 10,
                minHeight:'90vh',
                background:'#ffffff',
                borderRadius:20,
                maxHeight:'90vh',
                overflow:'auto',
                width:909,
            }}
            >
                {/* 作品、收藏 */}
                <Menu mode='horizontal'selectedKeys={current} >
                    <Menu.Item
                    style={{
                        minWidth:440 ,
                        textAlign:'center',
                        background:'white',
                        }}
                    key='Works'
                    label='作品'
                    onClick={Works}
                    >
                        作品
                    </Menu.Item>
                    <Menu.Item
                    style={{
                        minWidth:440, 
                        textAlign:'center',
                        background:'white',
                    }}
                    label='收藏'
                    key='Favorites'
                    onClick={Favorites}
                    >
                        收藏
                    </Menu.Item>
                </Menu>
                {isWorksVisible && <WorksList />}
                {isFavoritesVisible && <FavoritesList />}
            </Content>
        </Layout>
    </ConfigProvider>
  );
};

export default Other;